<template>
  <div class="module">
    <div class="title">
      自动化比例：
      <span class="num">
        {{progress}}<span class="unit">%</span>
      </span>
    </div>
    <div class="chart-item" id="chart-pie-1"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { realPx } from "@/utils/common";
import { manuautonode } from '@/api/api-mock';
export default {
  data() {
    return {
      zNum: 0,
      sNum: 0,
      myChart: null
    };
  },
  computed: {
    progress() {
      return parseInt((this.zNum / (this.zNum + this.sNum)) * 100);
    }
  },
  mounted() {
    // 根据数据来渲染echarts
    manuautonode().then(res => {
      if (res.success) {
        this.zNum = res.obj.autoCount
        this.sNum = res.obj.manuCount
        this.renderEcharts();
        setTimeout(this.resize, 0);
      }
    })
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getOption() {
      const data = [
        { value: this.zNum, name: "自动化节点" },
        { value: this.sNum, name: "人工节点" }
      ];

      var option = {
        color: ["rgba(59, 230, 255, 1)", "rgba(99, 102, 254, 1)"],
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            startAngle: 45,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  fontSize: realPx(86),
                  color: "rgba(197, 239, 255, 1)",
                  formatter: "{b}  {c}",
                  distanceToLabelLine: realPx(50)
                },
                labelLine: {
                  length: realPx(100),
                  length2: realPx(200),
                  show: true,
                  lineStyle: {
                    width: realPx(10)
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: realPx(86),
              }
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      };
      return option;
    },
    renderEcharts() {
      var myChart = echarts.init(document.getElementById("chart-pie-1"));
      let option = this.getOption();
      myChart.setOption(option);
      this.myChart = myChart;
    },
    resize() {
      this.myChart && this.myChart.resize();
    }
  }
};
</script>
<style lang="less" scoped>
.module {
  width: 100%;
  height: 100%;
  .title {
    height: 36px;
    line-height: 36px;
    text-align: left;
    padding-left: 17.6px;
    font-size: 12.3px;
    color: #fff;
    .num {
      font-family: "DIN-Alternate-Bold";
      font-size: 20px;
      color: rgba(59, 230, 255, 1);
      .unit {
        font-family: "PingFangSC-Light";
        font-size: 12.28px;
        vertical-align: bottom;
      }
    }
  }
  .chart-item {
    width: 100%;
    height: calc(100% - 36px);
  }
}
</style>
